Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GS-7591] Add new Step Slider component #250

Merged
merged 15 commits into from
Aug 19, 2024
Merged

[GS-7591] Add new Step Slider component #250

merged 15 commits into from
Aug 19, 2024

Conversation

JBezerra
Copy link
Contributor

@JBezerra JBezerra commented Aug 16, 2024

GS-7591

Before you start

A few things related to tooling were installed and configured so we can have better DX/reliability going forward:

  • ✔️ Typescript
  • ✔️ Jest
  • ✔️ React testing library

⚠️ How to test

In order to have better understanding how to link the changes of this PR to your local spark, please read the docs.

TL;DR Version

On Spark

cd web/
yalc link contexture-react
yalc link contexture-client

cd ..
cd api/
yalc link contexture-elasticsearch

cd ..
cd common/
yalc link contexture-client
yalc link contexture-elasticsearch

On Contexture

cd packages/react/
yarn prepack && yalc push --force

cd ..
cd provider-elasticsearch/
yarn prepack && yalc push --force

cd ..
cd client/
yarn prepack && yalc push --force

On WebApp

Demo

2024-08-16.14-27-47.mp4

Context

As a Product Manager, I would like to have a more intuitive way for users to filter using Population Count in spending. Currently it is a range filter where users have to enter in a range to search. It would be nice if we could have pre-set population ranges for users to select and filter.

Start with preset ranges, below are the suggestions:

  • 0
  • 1,000
  • 5,000
  • 10,000
  • 25,000
  • 50,000
  • 1,000,000+ ( >= 1,000,000)

Acceptance Criterias:

  • Create new filter type for Population Count in Spending
  • Filter type should be a slider with set ranges. Users can drag the slider and it will snap to each range available
  • Preset range buckets that slider will snap to as you drag it (component available in chakra)
  • Display the selected range above the slider on the left
  • Display the value of the range at the start/end of your selection when you hover
  • Dynamically calculate the count of records as you make your range selection and display above the slider on the right
  • Is it possible to do this without hitting search so users can see the number of expected results when they select a range?

Copy link

changeset-bot bot commented Aug 16, 2024

🦋 Changeset detected

Latest commit: b1e4db6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
contexture-elasticsearch Minor
contexture-client Minor
contexture-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@JBezerra JBezerra force-pushed the GS-7591/step-slider branch from 771d85a to aff206b Compare August 16, 2024 18:11
Copy link
Contributor

github-actions bot commented Aug 16, 2024

Warnings
⚠️ ❗ This PR is BIG (+4631 -139) Please keep it below 500 net changes

Generated by 🚫 dangerJS against b1e4db6

Copy link
Contributor

@conraddavisjr conraddavisjr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Outstanding work!

I owe you a review locally.
I was able to do due diligence and managed to leave feedback. Thanks @JBezerra!

packages/react/.storybook/main.js Outdated Show resolved Hide resolved
packages/react/src/exampleTypes/StepSlider.tsx Outdated Show resolved Hide resolved
{/** This padding exists because of contexture native margins.
* When the slider thumb is encapsulated on the filter UI,
* part of it gets cut if no padding is applied. */}
<Box marginTop="6px" paddingX="11px">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A request for em/rem over px

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about properly discussing that before moving forward with this change? My reason for that consideration is because we are using pixels as our measure everywhere on contexture and spark.

Doing this change in isolation wouldn't make sense if we are not willing to set that as our new standard from here and beyond. Other than that, that are other considerations we should do before starting using rem on a codebase founded in pixels.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about em? What are the repercussions of using that?
I might be missing something, but I don't see drawbacks specifically with em(?).

Also happy to discuss as a team. In fact, that could be more effective to tackle as a group,
v.s a siloed PR. 👍🏾

packages/react/src/exampleTypes/StepSlider.tsx Outdated Show resolved Hide resolved
packages/react/src/exampleTypes/TypeMap.js Show resolved Hide resolved
@JBezerra JBezerra force-pushed the GS-7591/step-slider branch from 8b9ab9f to e46381c Compare August 19, 2024 14:04
@JBezerra JBezerra requested a review from conraddavisjr August 19, 2024 14:05
Copy link
Contributor

@conraddavisjr conraddavisjr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified locally, great work champ!! 🏆

@JBezerra JBezerra force-pushed the GS-7591/step-slider branch from d87b453 to 16e9bbf Compare August 19, 2024 16:56
@JBezerra JBezerra force-pushed the GS-7591/step-slider branch from b7c9864 to b2e80ce Compare August 19, 2024 16:57
@JBezerra JBezerra force-pushed the GS-7591/step-slider branch from 0a7c29d to 8dbf2ef Compare August 19, 2024 18:07
Copy link
Contributor

Coverage after merging GS-7591/step-slider into main will be

90.51%

Coverage Report
FileStmtsBranchesFuncsLinesUncovered Lines
packages/client/src
   exampleTypes.js95.04%85.71%40%98.28%109, 123, 126–133
   index.js98.96%93.85%100%100%211, 213, 284, 73
   lens.js100%100%100%100%
   listeners.js100%100%100%100%
   mockService.js95.65%83.33%100%100%22, 30
   node.js96.75%96%87.50%97.78%72, 76, 76
   reactors.js99.12%100%90.91%100%
   serialize.js100%100%100%100%
   subquery.js97.59%88.89%100%98.55%66, 66
   traversals.js100%100%100%100%
   types.js92.59%83.33%100%95.24%12–13
   validation.js78.79%83.33%100%77.78%20–26
packages/client/src/actions
   index.js100%100%100%100%
   wrap.js96.67%85.71%100%97.92%41, 41
packages/client/src/exampleTypes
   pivot.js82.87%74.29%87.50%83.70%10–13, 138–139, 14, 140–149, 15, 150–161, 167–168, 21–22, 227, 23, 243, 257–263, 48, 53–57, 8–9, 9
packages/client/src/util
   futil.js67.31%100%57.14%65.85%18–19, 24–28, 31, 36–41
   tree.js100%100%100%100%
packages/export/src
   csv.js92.98%80%50%96%26, 47–48
   excel.js93.69%76.92%50%97.87%13, 38, 52, 91–92
   index.js0%100%0%0%1–6
   utils.js100%100%100%100%
packages/export/src/nodes
   fieldValuesGroupStats.js75%70%66.67%76.74%25, 29, 34–43, 9
   index.js0%100%0%0%1–6
   pivot.js98.43%82.35%100%100%52, 56, 89
   results.js100%100%100%100%
   terms_stats.js100%100%100%100%
packages/provider-elasticsearch/src
   compat.js100%100%100%100%
   index.js79.26%46.43%80%85.33%100, 104, 104, 116–121, 123, 129, 13, 130–139, 14, 30, 61–67, 72–73, 79, 81, 88–89
   schema.js89.29%92.86%80%89.25%53–56, 86–92
   types.js100%100%100%100%
packages/provider-elasticsearch/src/example-types
   index.js100%100%100%100%
   schemaMapping.js100%100%100%100%
   testUtils.js98.88%92.31%100%100%12
packages/provider-elasticsearch/src/example-types/filters
   bool.js100%100%100%100%
   date.js85.71%66.67%50%89.19%10–11, 19, 19, 9
   dateRangeFacet.js70.71%100%75%67.82%59–86
   exists.js100%100%100%100%
   facet.js91.47%76.47%66.67%94.50%39–40, 65–66, 66–71
   geo.js100%100%100%100%
   number.js52.05%100%50%50%22–29, 33–56
   query.js100%100%100%100%
   step.js89.55%100%71.43%90.57%41–45
   tagsQuery.js86.98%90.63%85.71%86.36%111–128, 140, 149–153, 159–161
   tagsText.js100%100%100%100%
   text.js95.73%86.67%100%98.82%11, 22, 40, 71, 71
packages/provider-elasticsearch/src/example-types/legacy
   cardinality.js93.33%100%50%100%
   dateHistogram.js95.45%100%50%100%
   esTwoLevelAggregation.js92.11%86.67%66.67%93.75%34–36, 83–87
   matchStats.js97.06%100%50%100%
   rangeStats.js100%100%100%100%
   smartIntervalHistogram.js97.44%100%50%100%
   statistical.js90.91%100%50%100%
   terms_stats.js97.73%100%66.67%100%
packages/provider-elasticsearch/src/example-types/metricGroups
   dateIntervalGroupStats.js100%100%100%100%
   dateRangesGroupStats.js98.28%100%75%100%
   fieldValuePartitionGroupStats.js87.76%100%40%92.31%34–36
   fieldValuesDelta.js97.44%100%66.67%100%
   fieldValuesGroupStats.js99.07%100%83.33%100%
   groupStatUtils.js86.05%100%75%85.71%20–24
   numberIntervalGroupStats.js100%100%100%100%
   numberRangesGroupStats.js97.87%100%66.67%100%
   percentilesGroupStats.js82.46%75%50%85.71%16–18, 24–26, 43–44
   pivot.js85.62%89.89%71.43%85.65%107, 151–152, 159, 166, 408–410, 460–470, 473, 478, 480, 483, 486, 534–535, 563–619, 75–81, 84–91
   stats.js86.96%100%50%94.12%16
   tagsQueryGroupStats.js100%100%100%100%
packages/provider-elasticsearch/src/example-types/metricGroups/pivotData
   columnResponse.js100%100%100%100%
   columnResult.js100%100%100%100%
   pivotResponse.js100%100%100%100%
   pivotResponseWithFilteredFieldValueGroup.js100%100%100%100%
packages/provider-elasticsearch/src/example-types/results
   index.js18.60%100%0%19.51%10–40, 8–9
packages/provider-elasticsearch/src/example-types/results/highlighting
   request.js95.15%93.75%100%95.26%193, 193–201, 40–42
   response.js100%100%100%100%
   search.js31.15%100%0%31.67%20–60
   testSchema.js100%100%100%100%
   util.js100%100%100%100%
packages/provider-elasticsearch/src/schema-data
   aliases.js100%100%100%100%
   mapping-with-non-objects.js100%100%100%100%
   mapping-with-types.js100%100%100%100%
   mapping-without-types.js100%100%100%100%
   schema-with-types.js100%100%100%100%
   schema-without-types.js100%100%100%100%
packages/provider-elasticsearch/src/utils
   elasticDSL.js100%100%100%100%
   fields.js100%100%100%100%
   futil.js99.39%100%92.86%100%
   luceneQueryUtils.js100%100%100%100%
   regex.js100%100%100%100%
   results.js100%100%100%100%
   smartInterval.js83.33%33.33%100%92.86%11, 11, 9
packages/provider-mongo/src
   index.js93.33%71.43%83.33%96.77%10, 33, 45, 9
   types.js100%100%100%100%
packages/provider-mongo/src/example-types
   bool.js100%100%100%100%
   date.js96%90.91%100%97.06%23, 23
   dateHistogram.js94.20%62.50%100%98.31%19, 19, 25, 25
   exists.js100%100%100%100%
   facet.js98.95%95.74%100%99.56%123–124, 124
   index.js100%100%100%100%
   mongoId.js100%100%100%100%
   number.js100%100%100%100%
   results.js97.74%92.31%100%99.01%180, 59, 61, 64–66
   statistical.js100%100%100%100%
   tagsText.js100%100%100%100%
   termsStats.js100%100%100%100%
   text.js100%100%100%100%
packages/react/src
   FilterAdder.js0%100%0%0%1, 10–19, 2, 20–29, 3, 30–39, 4, 40–49, 5, 50–52, 6–9
   FilterAdder.stories.js0%100%0%0%1, 10–19, 2, 20–23, 3–9
   FilterButtonList.js0%100%0%0%1, 10, 100–109, 11, 110–119, 12, 120–129, 13, 130–139, 14, 140–149, 15, 150–159, 16, 160–168, 17–19, 2, 20–29, 3, 30–39, 4, 40–49, 5, 50–59, 6, 60–69, 7, 70–79, 8, 80–89, 9, 90–99
   FilterButtonList.stories.js0%100%0%0%1, 10–19, 2, 20–29, 3, 30–39, 4, 40–49, 5, 50–56, 6–9
   FilterList.js0%100%0%0%1, 10, 100–109, 11, 110–119,

Copy link
Contributor

@positiveVibes4all positiveVibes4all left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GTG

@JBezerra JBezerra merged commit ec35c2c into main Aug 19, 2024
3 checks passed
@JBezerra JBezerra deleted the GS-7591/step-slider branch August 19, 2024 18:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants